<template>
	<div class="p-4">
		<el-card class="box-card el-set-form p-4">
			<el-form
			    :label-position="labelPosition"
			    label-width="100px"
			    :model="formLabelAlign"
			    style="max-width: 460px"
			  >
			    <el-form-item label="手机号">
			      <el-input v-model="formLabelAlign.name" />
			    </el-form-item>
				
				<el-form-item
					label="验证码"
					prop="VerificationCode"
				>
				<el-col :span="16">
					<el-input slot="suffix" v-model="formLabelAlign.name" placeholder="请输入验证码">
					</el-input>
				</el-col>	
				<el-col :span="7">
					<el-button style="height: 40px;background-color: #DBEDFF;color: #0054A6;border-color: #DBEDFF;" class="ml-[15px]" :disabled="setText.disabled" @click="getCode">
						<span class="Time">{{setText.btnTxt}}</span>
					</el-button>
				</el-col>	
				</el-form-item>
			    <el-form-item label="新密码">
			      <el-input v-model="formLabelAlign.region" />
			    </el-form-item>
			    <el-form-item label="确认密码">
			      <el-input v-model="formLabelAlign.type" />
			    </el-form-item>
				<el-form-item class="mt-[30px]">
					<el-button style="width: 100%; height: 48px;line-height: 48px;background-color: #0054A6;border: none;" type="primary" size="large"
					 @click="handleSave">
					  保存
					</el-button>
				</el-form-item>
			  </el-form>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormProps } from 'element-plus'


const labelPosition = ref<FormProps['labelPosition']>('right')

const formLabelAlign = reactive({
	name: '',
	region: '',
	type: '',
	
})

const setText = reactive({
	btnTxt: "获取验证码",
	disabled: false,
	time: 0,
})
const handleSave = async () => {
	
}
const getCode = async () => {
	console.log(1)
}
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label{
		color: var(--el-text-color-main);
	}
	.el-set-form:deep() .el-input__wrapper{
		box-shadow: inherit;
		background-color: #F5F7FA;
	}
	.el-set-form:deep() .el-input__inner{
		height: 40px;
	}
</style>